<template>
  <div class="container">
    <h1 class="tip">确认挂号信息</h1>
    <!-- 卡片：展示就诊人信息 -->
    <el-card class="box-card">
      <!-- 卡片头部 -->
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button type="primary" size="default" :icon="User" @click="goUser">添加就诊人</el-button>
        </div>
      </template>
      <!-- 卡片身体 -->
      <div class="user">
        <Visitor v-for="(user, index) in userArr" :key="user.id" class="item" :user="user" @click="changeIndex(index)"
          :index="index" :currentIndex="currentIndex" />
      </div>
    </el-card>
    <!-- 卡片：展示医生信息 -->
    <el-card class="box-card">
      <!-- 卡片头部 -->
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <!--卡片身体-描述列表 -->
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期：</div>
          </template>
          {{ doctorInfoData.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院：</div>
          </template>
          {{ doctorInfoData.param?.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室：</div>
          </template>
          {{ doctorInfoData.param?.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名：</div>
          </template>
          {{ doctorInfoData.docname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称：</div>
          </template>
          {{ doctorInfoData.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长：</div>
          </template>
          {{ doctorInfoData.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务费：</div>
          </template>
          <span style="color: red;">{{ doctorInfoData.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <!--卡片身体-确认挂号按钮 -->
      <div class="btn">
        <el-button type="primary" size="default" :disabled="currentIndex == -1 ? true : false"
          @click="submitOrder">确定挂号</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 引入组合式api
import { onMounted, ref } from 'vue';
//引入图标
import { User } from '@element-plus/icons-vue'
//引入路由 路由器
import { useRoute, useRouter } from 'vue-router';
//引入获取就诊人信息的接口和ts类型
//@ts-ignore
import { reqGetUser, reqDoctorInfo } from '@/api/hospital'
//@ts-ignore
import type { UserResponseData, UserArr, DoctorInfoResponseData, Doctor } from '@/api/hospital/type'
//引入挂号信息的接口和ts类型
//@ts-ignore
import { reqSubmitOrder } from '@/api/user'
//@ts-ignore
import type { SubmitOrderResponseData } from '@/api/user/type'
//引入ElMessage处理错误
import { ElMessage } from 'element-plus';

//路由 路由器
let $route = useRoute()
let $router = useRouter()
//就诊人信息
let userArr = ref<UserArr>([] as UserArr)
//某一个医生挂号信息数据
let doctorInfoData = ref<Doctor>({} as Doctor)
//用户确定就诊人的索引值
let currentIndex = ref<number>(-1)

//发送请求,获取数据
const fetchUserData = async () => {
  //发送请求
  let result: UserResponseData = await reqGetUser()
  if (result.code == 200) {
    //获取就诊人信息数据
    userArr.value = result.data
  }
}
//发送请求,获取数据
const fetchDoctorInfo = async () => {
  //发送请求
  let result: DoctorInfoResponseData = await reqDoctorInfo($route.query.docId as string)
  if (result.code == 200) {
    // 获取某一个医生挂号信息数据
    doctorInfoData.value = result.data
  }
}
//组件挂载完毕：发送请求，获取数据
onMounted(() => {
  //发送请求，获取数据
  fetchUserData()
  //发送请求，获取数据
  fetchDoctorInfo()
})
//点击就诊人子组件的对调
const changeIndex = (index: number) => {
  //当前用户索引值就是点击的用户索引值
  currentIndex.value = index
}
//点击确定挂号按钮的回调:发送请求,获取数据
const submitOrder = async () => {
  //医院编号 医生ID 就诊人ID
  let hoscode = doctorInfoData.value.hoscode
  let scheduleId = doctorInfoData.value.id
  let patientId = userArr.value[currentIndex.value].id
  //发送请求
  let result: SubmitOrderResponseData = await reqSubmitOrder(hoscode, scheduleId, patientId)
  if (result.code == 200) {
    //路由跳转
    $router.push({
      path: '/user/order',
      query: {
        //获取订单编号
        orderId: result.data
      }
    })
  } else {
    ElMessage({
      type: 'error',
      message: result.message
    })
  }
}
//点击添加就诊人的回调
const goUser = () => {
  $router.push({
    path: '/user/patient',
    query: {
      type: 'add'
    }
  })
}
</script>

<style scoped lang="scss">
.container {
  .tip {
    font-size: 20px;
    font-weight: 900;
    color: #7f7f7f;
  }

  .box-card {
    margin: 20px 0;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 32%;
        margin: 5px;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>